<template>
    <view class="xilu">
        <!-- 胶囊栏改为蓝色背景 -->
        <u-navbar :safeAreaInsetTop="true" :leftIconSize="0" :placeholder="true" bgColor="#6F9EE8">
            <!-- 移除原有的左右插槽内容 -->
            <view slot="left"></view>
            <view slot="center"></view>
        </u-navbar>
        
        <!-- 自定义搜索区域 -->
        <view class="custom-search-area">
            <view class="city-selector" @click="bindCityChange()">
                <view class="flex-box city fs24">{{currentCity?currentCity.name:'全国'}}<view class="city-arrow"></view></view>
            </view>
            
            <view class="search-box" @click="search()">
                <view class="fs24 cola flex-grow-1">输入关键字搜索</view>
                <view class="search-btn btn1">搜索</view>
            </view>
            
            <view class="admin-center" @click="navigateTo('/pages/admin/admin')">管理中心</view>
        </view>
        <!-- 控制底部菜单索引 -->
        <Footer :footState="0" :num="messageCount"></Footer>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" bottom="120rpx" :safearea="true">
            <view class="container">
                <!-- 背景渐变区 -->
                <view class="xilu_bg_block"></view>
                
                <!-- 主横幅广告 MIBOO -->
               <view class="miboo-banner">
                    <!-- <image src="/static/images/index-banner.png" mode="aspectFill"></image> -->
					<image :src="bannerList[0]['thumb_image']" mode="aspectFill"></image>
                </view>
				
				<!-- <swiper autoplay circular class="xilu_banner">
				     <swiper-item class="swiper-item" v-for="(item,index) in bannerList">
				         <view class="swiper-item">
				             <image :src="item.thumb_image" mode="aspectFill"></image>
				         </view>
				     </swiper-item>
				 </swiper> -->
                
                <!-- 四个功能图标 -->
				
				<!-- <view class="xilu_classic_item flex-box" v-for="(item,index) in hotCategoryList" :key="index" @click="bindGoodsList(item.id)">
				    <image :src="item.thumb_image" mode="aspectFill"></image>
				    <view class="flex-grow-1">
				        <view class="col3 fs30">{{item.name}}</view>
				       
				    </view>
				</view>
				 -->
				
                <view class="function-icons">
					
					
                    <view class="function-item" v-for="(item,index) in hotCategoryList" :key="index" @click="bindGoodsList(item.id)">
                        <image :src="item.thumb_image"  mode="aspectFill"></image>
                        <view class="function-text">{{item.name}}</view>
                    </view>
             
                </view>
                
                <!-- 服务导航 -->
				
				
				<view class="service-nav">
				    <view :class="classicIndex == index?'service-nav-item active':'service-nav-item'" v-for="(item,index) in classList" @click="changeList(index)">{{item.name}}</view>
				</view>
				
			
			  <goodsfwlist :list="list" :showCollect="false"></goodsfwlist>
           
				
				
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import Footer from "@/components/footer/footer.vue";
    // import goodslist from "@/components/goodslist/goodslist.vue";
	 import goodsfwlist from "@/components/goodslist/goodsfwlist.vue";
    const chatIM = require('../../xilu/chat.js');
	const app = getApp();
    export default {
        components: {
            Footer,
            goodsfwlist
        },
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                logo: '',
                hotCategoryList: [],
                bannerList: [],
				bannerList2:[],
                classList: [],
                classicIndex: 0,
                dataList: [],
                upOption: {
                    bgColor: "#F7F9FC",
                    textColor: "#aaa",
                    toTop: {
                        src: ""
                    },
                    empty: {
                        use: false,
                    }
                },
				currentCity: null,
				messageCount:0,
                list: [

                ],
            }
        },
        onLoad() {
            let page = this;
			this.currentCity = this.$core.getCurrentCity();
			uni.$on(app.globalData.Event.CurrentCityChange, function(currentCity) {
				page.currentCity = currentCity;
				page.refresh();
			})
			
            //热门分类-一级
            this.fetchHotCategory();
            //2.轮播图
            this.fetchBanner();
			//3.轮播图2
			this.fetchBanner2();
            //3.分类
            this.fetchSecondCategory()
            //4.商品
            uni.$on("unread_count", function(data) {
                page.messageCount = getApp().globalData.chat_config.messageCount;
            });
			if (getApp().globalData.chat_config.SocketTask) {
			   // chatIM.setMessageBadge(false)
			}
        },
        onShow() {
        },
        onUnload() {
            uni.$off("unread_count");
			uni.$off(app.globalData.Event.CurrentCityChange);
        },
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
        methods: {
            // 新增方法 - 导航
            navigateTo(url) {
                uni.navigateTo({
                    url: url
                });
            },
			//更换城市
			bindCityChange(){
				uni.navigateTo({
				    url: '/pages/change_city/change_city'
				})
			},
			//搜索
            search() {
                uni.navigateTo({
                    url: '/pages/search_result/search_result'
                })
            },
			//更多二手
			bindGoodsList(id){
				uni.navigateTo({
					url: '/pages/goods_list/goodsfw_list?category_id='+id
				})
			},
			//更多
			bindMore(url){
				if(!url) return '';
				uni.navigateTo({
				    url: url
				})
			},
			//页面数据刷新
			refresh(){
				this.fetchHotCategory();
				this.fetchBanner();
				// this.fetchBanner2();
				this.fetchSecondCategory();
				this.downCallback();
			},
			//热门分类
            fetchHotCategory() {
                this.$core.get({
                    url: 'xilumarket.productfw_category/recommend_lists',
                    data: {
                        pagesize: 4
                    },
                    loading: false,
                    success: ret => {
                        this.hotCategoryList = ret.data;
                    }
                })
            },
			//轮播图
            fetchBanner() {
                this.$core.get({
                    url: 'xilumarket.banner/banners',
                    data: {
                        group: 'index'
                    },
                    loading: false,
                    success: ret => {
                        this.bannerList = ret.data;
                    }
                })
            },
			//轮播图2
			fetchBanner2() {
			    this.$core.get({
			        url: 'xilumarket.banner/banners',
			        data: {
			            group: 'index2'
			        },
			        loading: false,
			        success: ret => {
			            this.bannerList2 = ret.data;
			        }
			    })
			},
            fetchSecondCategory() {
                this.$core.get({
                    url: 'xilumarket.productfw_category/recommend_second_lists',
                    data: {
                        pagesize: 20
                    },
                    loading: false,
                    success: ret => {
                        this.classList = ret.data;
                    }
                })
            },
            changeList(index) {
                this.classicIndex = index;
                this.downCallback();

            },
            downCallback() {
                // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
                // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )     
                this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                // if(page.num == 1){
                // 	// 请求其他接口...
                // }

                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let categoryId = this.classList.length > 0 ? this.classList[this.classicIndex].id : -1;
                this.$core.get({
                    url: 'xilumarket.productfw/lists',
                    data: {
                        category_id: categoryId,
                        page: pageNum,
                        pageSize: pageSize
                    },
                    loading: false,
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        //let totalSize = data.total;
                        // 接口返回的是否有下一页 (true/false)
                        //let hasNext = data.current_page;

                        //设置列表数据
                        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
                        this.list = this.list.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);

                        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                        //this.mescroll.endBySize(curPageLen, totalSize); 

                        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                        //this.mescroll.endSuccess(curPageLen, hasNext); 

                        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                        //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                        //如果传了hasNext,则翻到第二页即可显示无更多数据.
                        //this.mescroll.endSuccess(curPageLen);

                        // 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
                        // 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)

                        // 上拉加载的 curPageLen 必传, 否则会一直显示'加载中...':
                        // 1. 使配置的noMoreSize 和 empty生效
                        // 2. 判断是否有下一页的首要依据:
                        //     当传的值小于page.size时(说明不满页了), 则一定会认为无更多数据;
                        // 比传入的totalPage, totalSize, hasNext具有更高的判断优先级;
                        // 3. 当传的值等于page.size时(满页), 才取totalPage, totalSize, hasNext判断是否有下一页
                        // 传totalPage, totalSize, hasNext目的是避免方法四描述的小问题

                        // 提示: 您无需额外维护页码和判断显示空布局,mescroll已自动处理好.
                        // 当您发现结果和预期不一样时, 建议再认真检查以上参数是否传正确
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })

            },
        },
    }
</script>

<style lang="scss" scoped>
    .xilu {
        background-color: #F7F9FC;
        
        // 自定义搜索区域
        .custom-search-area {
            display: flex;
            align-items: center;
            padding: 20rpx 30rpx;
            background: linear-gradient(180deg, #6F9EE8 0%, rgba(111, 158, 232, 0.8) 100%);
            position: relative;
            z-index: 5;
            
            .city-selector {
                padding: 12rpx 24rpx;
                margin-right: 20rpx;
                
                .city {
                    display: flex;
                    align-items: center;
                    color: #FFFFFF;
                    
                    &-arrow {
                        width: 0;
                        height: 0;
                        border-width: 10rpx 10rpx 0;
                        border-style: solid;
                        border-color: #FFFFFF transparent transparent;
                        margin-left: 10rpx;
                    }
                }
            }
            
            .search-box {
                flex: 1;
                height: 75rpx;
                background: #FFFFFF;
                border-radius: 40rpx;
                padding: 0 12rpx 0 20rpx;
                display: flex;
                align-items: center;
                border: none;
                
                .search-btn {
                    width: 100rpx;
                    height: 56rpx;
                    font-size: 24rpx;
                    line-height: 56rpx;
                    text-align: center;
                    border-radius: 28rpx;
                    background-color: #4A90E2;
                    color: #fff;
                }
            }
            
            .admin-center {
                margin-left: 20rpx;
                padding: 16rpx 24rpx;
                background: #4A90E2;
                color: #FFFFFF;
                font-size: 24rpx;
                border-radius: 30rpx;
                height: 75rpx;
                line-height: 43rpx;
                box-sizing: border-box;
            }
        }
        
        &_bg_block {
            width: 750rpx;
            height: calc(486rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #6F9EE8 0%, #FFFFFF 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        .container {
            background-color: transparent;
            min-height: auto;
            height: auto;
            padding-bottom: 0;
        }
        
        // MIBOO 横幅
        .miboo-banner {
            width: 690rpx;
            height: 380rpx;
            margin: 30rpx auto;
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;
            z-index: 3;
            
            image {
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
            }
        }
        
        // 功能图标
        .function-icons {
            width: 690rpx;
            height: 180rpx;
            background: #FFFFFF;
            border-radius: 20rpx;
            margin: 0 auto 30rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20rpx 0;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            
            .function-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                
                image {
                    width: 90rpx;
                    height: 90rpx;
                    margin-bottom: 15rpx;
                }
                
                .function-text {
                    font-size: 28rpx;
                    color: #333;
                }
            }
        }
        
        // 服务导航
        .service-nav {
            display: flex;
            padding: 30rpx;
            font-size: 30rpx;
            
            .service-nav-item {
                margin-right: 40rpx;
                color: #888;
                font-weight: normal;
                position: relative;
                
                &.active {
                    color: #333;
                    font-weight: bold;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -10rpx;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 30rpx;
                        height: 6rpx;
                        background-color: #F9C022;
                        border-radius: 3rpx;
                    }
                }
            }
        }
        
        // 服务列表
        .service-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 30rpx;
            
            .service-card {
                width: 330rpx;
                background: #FFFFFF;
                border-radius: 20rpx;
                margin-bottom: 30rpx;
                box-shadow: 0rpx 4rpx 10rpx rgba(183, 189, 202, 0.1);
                overflow: hidden;
                
                .service-img {
                    width: 330rpx;
                    height: 330rpx;
                }
                
                .service-location {
                    position: absolute;
                    top: 20rpx;
                    right: 20rpx;
                    background-color: rgba(0, 0, 0, 0.5);
                    color: #fff;
                    border-radius: 20rpx;
                    padding: 4rpx 15rpx;
                    font-size: 22rpx;
                    display: flex;
                    align-items: center;
                    
                    .location-icon {
                        width: 20rpx;
                        height: 20rpx;
                        background-color: #fff;
                        border-radius: 50%;
                        margin-right: 6rpx;
                    }
                }
                
                .service-title {
                    font-size: 28rpx;
                    color: #333;
                    padding: 15rpx 20rpx 10rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                
                .service-price {
                    font-size: 24rpx;
                    color: #888;
                    padding: 0 20rpx 15rpx;
                }
                
                .service-provider {
                    display: flex;
                    align-items: center;
                    padding: 0 20rpx 20rpx;
                    
                    .provider-avatar {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 50%;
                    }
                    
                    .provider-name {
                        font-size: 24rpx;
                        color: #333;
                        margin-left: 10rpx;
                        flex: 1;
                    }
                    
                    .service-likes {
                        display: flex;
                        align-items: center;
                        
                        .like-icon {
                            width: 24rpx;
                            height: 24rpx;
                            background-color: #ddd;
                            border-radius: 50%;
                            margin-right: 6rpx;
                        }
                        
                        text {
                            font-size: 24rpx;
                            color: #888;
                        }
                    }
                }
            }
        }
    }
</style>